<!--
 * @Author: your name
 * @Date: 2021-04-01 22:57:37
 * @LastEditTime: 2021-04-02 15:11:37
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \jQuery\07 - bootstrap.html
-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>Bootstrap 实例 - 内联表单</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./07 - bootstrap.css">
    <script>
        $(function() {
            // 下拉框点击内容后，回显出选择的内容
            $('.dropdown-menu li').click(function(event) {
                var target = $(event.currentTarget);
                target.closest('.dropdown')
                    .find('[data-bind="label"]').text(target.text()).attr('title', target.text())
                    .children('.dropdown-toggle').dropdown('toggle');
            });
            $('.dropdown-menu li').each(function() {
                if ($(this).attr('selected')) {
                    $(this).trigger('click');
                }
            });
            // 保存按钮点击事件
            $('#submit').click(function() {
                const name = $('#name').val()
                if (!name) {
                    $('#name').parent().addClass('has-error')
                } else {
                    $('#name').parent().removeClass('has-error')
                }
                const sex = $('#optionsRadios:checked').val() === 1 ? '男' : '女'
                const birth = $('#birth').val()
                const edu = $('#education').attr('title')
                const education = edu ? edu.trim() : ''
                const exp = $('#experience').attr('title')
                const experience = exp ? exp.trim() : ''
                const phoneNumber = $('#phoneNumber').val()
                const email = $('#email').val()
                const job = $('#jobCondition').attr('title')
                const jobCondition = job ? job.trim() : ''
                const advantage = $('#advantage').val()
                console.log({
                    '姓名': name,
                    '性别': sex,
                    '出生日期': birth,
                    '最高学历': education,
                    '工作经验': experience,
                    '手机号码': phoneNumber,
                    '电子邮箱': email,
                    '求职状态': jobCondition,
                    '我的优势': advantage
                })
            })
        })
    </script>
    <style>
        .my-form-label {
            /* 表单的label标签设置内边距30像素 */
            padding-left: 30px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 1.添加水平布局的表单form-horizontal -->
        <form class="form-horizontal" id="personalForm" style="padding-top: 10px;">
            <!-- 2.将每一项添加一个form-group，装标签label和控件input -->
            <div class="form-group">
                <!-- 3.使用栅格系统布局，总共12列。label占4列col-xs-4，控件占8列col-xs-8 -->
                <label for="image" class="col-xs-4 control-label my-form-label">头像</label>
                <!-- text-right设置图片右对齐 -->
                <div class="col-xs-8 text-right">
                    <!-- img-circle设置图片形状为圆形 -->
                    <img src="./tx.jpg" style="width: 50px; height: 50px;" alt="" class="img-circle">
                </div>
            </div>
            <!-- 姓名 -->
            <div class="form-group">
                <label for="name" class="col-xs-4 control-label my-form-label">姓名</label>
                <div class="col-xs-8">
                    <input type="text" class="form-control" id="name" placeholder="姓名" required>
                </div>
            </div>
            <!-- 性别 -->
            <div class="form-group">
                <label for="sex" class="col-xs-4 control-label my-form-label">性别</label>
                <div class="col-xs-8">
                    <input type="radio" name="optionsRadiosinline" id="optionsRadios" value="1" checked> 男
                    <input type="radio" name="optionsRadiosinline" id="optionsRadios" value="0"> 女
                </div>
            </div>
            <!-- 出生年月 -->
            <div class="form-group">
                <label for="birth" class="col-xs-4 control-label my-form-label">出生年月</label>
                <div class="col-xs-8">
                    <input type="date" class="form-control" id="birth" placeholder="出生年月" required>
                </div>
            </div>
            <!-- 最高学历 -->
            <div class="form-group">
                <label for="education" class="col-xs-4 control-label my-form-label">最高学历</label>
                <div class="col-xs-8">
                    <!-- dropdown下拉组件 -->
                    <div class="dropdown">
                        <!-- btn-default按钮默认样式， -->
                        <button type="button" class="btn btn-default dropdown-toggle form-control"
                            id="dropdownTitle" data-toggle="dropdown">
                            <!-- caret箭头 -->
                            <span id="education" data-bind="label">请选择</span> <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li>
                                <!-- tabindex="-1"不能用tab键选中，等于0可以用tab选中 -->
                                <a tabindex="-1" href="#">中职</a>
                            </li>
                            <li>
                                <a tabindex="0" href="#">专科</a>
                            </li>
                            <li>
                                <a tabindex="-1" href="#">本科</a>
                            </li>
                            <li>
                                <a tabindex="-1" href="#">硕士研究生</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 工作经验 -->
            <div class="form-group">
            <label for="experience" class="col-xs-4 control-label my-form-label">工作经验</label>
            <div class="col-xs-8">
                <div class="dropdown">
                    <button type="button" class="btn btn-default dropdown-toggle form-control"
                        id="dropdownTitle" data-toggle="dropdown">
                        <span id="experience" data-bind="label">请选择</span> <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li>
                            <a tabindex="-1" href="#">无</a>
                        </li>
                        <li>
                            <a tabindex="-1" href="#">1年</a>
                        </li>
                        <li>
                            <a tabindex="-1" href="#">2年</a>
                        </li>
                        <li>
                            <a tabindex="-1" href="#">3年</a>
                        </li>
                        <li>
                            <a tabindex="-1" href="#">4年</a>
                        </li>
                        <li>
                            <a tabindex="-1" href="#">5年</a>
                        </li>
                        <li>
                            <a tabindex="-1" href="#">6年</a>
                        </li>
                        <li>
                            <a tabindex="-1" href="#">7年</a>
                        </li>
                        <li>
                            <a tabindex="-1" href="#">8年</a>
                        </li>
                        <li>
                            <a tabindex="-1" href="#">9年</a>
                        </li>
                    </ul>
                </div>
            </div>
            </div>
            <!-- 手机号码 -->
            <div class="form-group">
            <label for="phoneNumber" class="col-xs-4 control-label my-form-label">手机号码</label>
            <div class="col-xs-8">
                <input type="tel" class="form-control" id="phoneNumber" placeholder="手机号码" pattern="[0-9]*[1-9][0-9]*$" required>
            </div>
            </div>
            <!-- 电子邮箱 -->
            <div class="form-group">
                <label for="email" class="col-xs-4 control-label my-form-label">电子邮箱</label>
                <div class="col-xs-8">
                    <input type="email" class="form-control" id="email" placeholder="电子邮箱" required>
                </div>
            </div>
            <!-- 求职状态 -->
            <div class="form-group">
                <label for="jobCondition" class="col-xs-4 control-label my-form-label">求职状态</label>
                <div class="col-xs-8">
                    <div class="dropdown">
                        <button type="button" class="btn btn-default dropdown-toggle form-control"
                        id="dropdownTitle" data-toggle="dropdown">
                        <span id="jobCondition" data-bind="label">请选择</span> <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownTitle">
                        <li>
                            <a tabindex="-1" href="#">正在职，考虑换个新环境</a>
                        </li>
                        <li>
                            <a tabindex="-1" href="#">正在找工作</a>
                        </li>
                        <li>
                            <a tabindex="-1" href="#">目前不想换工作</a>
                        </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 我的优势 -->
            <div class="form-group">
                <label for="advantage" class="col-xs-4 control-label my-form-label">我的优势</label>
                <div class="col-xs-8">
                    <textarea class="form-control" id="advantage" rows="3"></textarea>
                </div>
            </div>
            <div class="form-group">
                <div class="col-xs-8 col-xs-offset-2">
                    <button type="submit" id="submit" class="btn btn-default" style="width: 100%;height: 40px;">保存</button>
                </div>
            </div>
        </form>
    </div>
</body>
</html>